<template>
	<view class="app-tabbar-layout" :style="[pageStyle, AppSkinVar]">
		<web-view :src="webUrl" v-if="isOther && onShow"></web-view>
		<view class="app-tabbar-layout__body" v-else>
			<layout :loading="loading" hasCustomNavigation :componentsList="componentsList" @pageBackgroundImageChange="setPageBackgroundImage"></layout>
			<!-- 弹窗广告组件 -->
			<i-ad-dialog :option="advertisingSetting" v-if="advertisingSetting.openAd" />
		</view>
	</view>
</template>
<script lang="ts">
import skinMixIn from '@/common/mixin/skinMixIn';
export default {
	mixins: [skinMixIn]
};
</script>

<script setup lang="ts">
import { ref, reactive, provide, onMounted } from 'vue';
import { useLayoutPage, useCurrentInstance } from '@/common/hooks';

// #ifdef PRIVATE || SUBSCRIPTION
import { wxAppMessageShareData, wxTimelineShareData, getShareLink } from '@/common/wxInit';
// #endif
import type { MpShare } from '@/common/utils';
import { useTabbar } from '../utils/customTabbar';
import { layoutPageContextKey } from '@/token';

interface Props {
	index: string;
	pageData: {
		link: {
			pageId?: string;
			isOther: boolean;
			linkUrl: string;
		};
	};
}

const props = defineProps<Props>();
const emit = defineEmits(['endRefresh']);

const ctx = useCurrentInstance();

const isOther = ref(false);
const webUrl = ref('');

const { onShow, onHide, onPullDownRefresh, onReachBottom } = useTabbar(props.index);

const { loading, componentsList, pageStyle, setPageBackgroundImage, advertisingSetting, init, mpShare } = useLayoutPage(ctx);

const contextId = ref('layout');

onShow(() => {
	contextId.value = 'layout';
	let _mpShare = mpShare;
	// #ifdef PRIVATE || SUBSCRIPTION
	if (Object.keys(_mpShare).length === 0) {
		_mpShare = {
			title: '', // 分享标题
			desc: '', // 分享描述
			link: getShareLink(), // 分享链接
			imgUrl: '' // 分享图标
		};
	}
	wxAppMessageShareData(_mpShare as MpShare);
	wxTimelineShareData(_mpShare as MpShare);
	// #endif
	uni.$endless.mpShare = _mpShare;
});

onHide(() => {
	contextId.value = '';
});

const handleReachBottom = () => {
	uni.$emit('onLayoutPageReachBottom');
};
onPullDownRefresh(() => {
	emit('endRefresh');
});
onReachBottom(() => {
	handleReachBottom();
});

provide(
	layoutPageContextKey,
	reactive({
		contextId
	})
);

onMounted(() => {
	if (props.pageData.link.pageId) {
		init(props.pageData.link.pageId);
	} else {
		loading.value = false;
		if (props.pageData.link.isOther) {
			isOther.value = true;
			webUrl.value = props.pageData.link.linkUrl;
		}
	}
});
</script>
<style lang="scss" scoped>
@include appBem_b(tabbar-layout) {
	

}
</style>
